<template>
  <div class="recup">
    <ul>
      <li v-for="(v, i) in arrc" :key="i">
          <img :src="v.imgurl" alt="" />
        <i>{{ v.text }}</i>
        <p>{{v.text2}}</p>
      </li>
    </ul>
  </div>
</template>

<script>
import getlink from "@/api/getlink.js";
export default {
  data() {
    return {
      arrc: [],
    };
  },
  components: {
    // HomeTitle
  },
  created() {
    getlink("/data/list/xiaoming").then((ok) => {
      this.arrc = ok.data.recuphome;
    });
  },
};
</script>

<style scoped>
ul {
  height: 1.8rem;
  background-color: rgb(247, 243, 243);
  display: flex;
  align-items: center;
  /* border-bottom: 0.01rem solid #999; */
  overflow-x: auto;
}

li {
  margin-left: 0.1rem;
  width: 1.4rem;
  height: 1.5rem;
  background-color: #fff;
  border-radius: .07rem;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  
}
img {
    border-radius: 50%;
  width: 0.55rem;
  height: 0.55rem;
  padding: .1rem .35rem 0 .35rem;
}
p{
    text-align: center;
    line-height: .25rem;
    width: .9rem;
    height: .25rem;
    background-color: green;
    border-radius: .3rem;
    color: #fff;
}
i{
    color: #333;
}
</style>